<template>
  <a-form layout="inline" class="listSearchWrap vehicleVersionSearch table-page-search-wrapper">
    <a-row :gutter="[16, 8]">
      <a-col
        :xs="24"
        :sm="24"
        :md="8"
        :lg="6"
        :xl="7"
        :xxl="7">
        <edit-item :label="$t('businessName')" textAlign="left" labelWidth="''">
          <a-input
            v-model.trim="queryParams.businessName"
            :placeholder="$t('pleaseInput') + $t('businessName')"
            :maxLength="50"
            @keyup.enter="handleSearch"
          />
        </edit-item>
      </a-col>
      <a-col
        :xs="24"
        :sm="24"
        :md="8"
        :lg="6"
        :xl="7"
        :xxl="7">
        <edit-item :label="$t('businessCode')" textAlign="left" labelWidth="''">
          <a-input
            v-model.trim="queryParams.businessCode"
            :placeholder="$t('pleaseInput') + $t('businessCode')"
            :maxLength="50"
            @keyup.enter="handleSearch"
          />
        </edit-item>
      </a-col>
      <a-col
        :xs="24"
        :sm="24"
        :md="8"
        :lg="3"
        :xl="3"
        :xxl="3">
        <a-form-item class="searchBtns">
          <a-button-group>
            <auth-button type="primary" :auth="managePerms.businessType.view" @click="handleSearch">
              <i class="iconfont icon-chazhao"/>{{ $t('inquiry') }}
            </auth-button>
            <a-button @click="clearCondition">
              <i class="iconfont icon-qingkong"/>{{ $t('clear') }}
            </a-button>
          </a-button-group>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>
<script>
import { mapState } from 'vuex'
import AuthButton from '@/components/AuthButton'
import { managePerms } from '@/config/permission/index'
import EditItem from '@/components/EditItem'
export default {
  components: {
    AuthButton,
    EditItem
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.businessType.queryParams
    })
  },
  data () {
    return {
      managePerms
    }
  },
  watch: {},
  created () {},
  methods: {
    // 搜索查询
    handleSearch () {
      this.$emit('clickbtn')
    },
    // 重置清空搜索条件
    clearCondition () {
      this.$store.commit('resetBusinessTypeQueryParams')
      this.handleSearch()
    }
  }
}
</script>
  <style lang="less">
</style>
